<template>
  <div class="addEvents">
    <el-form :model="eventForm"  ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="标题：" prop="region">
        <el-col :span="12">
          <el-input v-model="eventForm.eventtitle" placeholder="请输入标题"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="出版日期：" class="msTop">
        <el-col :span="12">
          <el-date-picker
              v-model="eventForm.eventdate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              class="input-area"
          />
        </el-col>
      </el-form-item>
      <el-form-item label="事件类型：" class="msTop">
        <el-select v-model="eventForm.eventtype" placeholder="请选择" clearable>
          <el-option :label="'research news'" :value="'1'" :key="'1'"></el-option>
          <el-option :label="'daily'" :value="'2'" :key="'2'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地点：" prop="region" class="msTop">
        <el-col :span="12">
          <el-input v-model="eventForm.address" placeholder="请输入内容"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="开始时间：" class="msTop">
        <el-col :span="10">
          <el-date-picker
                  v-model="eventForm.starttime"
                  value-format="yyyy-mm-dd hh:mm:ss"
                  type=datetime
                  placeholder="选择日期"
                  class="input-area"
                  style="width: 60%;"
          />
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间：">
            <el-date-picker
                    v-model="eventForm.endtime"
                    value-format="yyyy-mm-dd hh:mm:ss"
                    type="datetime"
                    placeholder="选择日期"
                    class="input-area"
                    style="width:75%;"
            />
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="是否置顶：" class="msTop">
        <el-radio-group v-model="eventForm.reprintflag">
          <el-radio :label="'0'" selected>否</el-radio>
          <el-radio :label="'1'">是</el-radio>
        </el-radio-group>
      </el-form-item>
<!--      <el-form-item label="事件正文：" class="msTop">-->
<!--        <el-input type="textarea" rows="6" placeholder="请输入内容" v-model="eventForm.eventtext"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item label="上传正文图片：" class="msTop">
        <el-upload
            class="upload-demo"
            action="http://39.106.171.39:8011/mbl/FileController/uploadFile"
            ref="eventUpload"
            :on-change="handleFileChange"
            :file-list="eventFileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :loading="fileLoading">上传到服务器</el-button>
          <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>
      </el-form-item>
      <el-form-item label="" class="msTop">
        <span class="text_edit">正文编辑</span>
        <quill-editor ref="myQuillEditor" v-model="eventForm.eventtext" class="myQuillEditor" :options="editorOption" />
      </el-form-item>
      <el-form-item class="msTop">
        <el-button class="submit" type="primary" @click="addSubmit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { addEvent, updateEvent, uploadFile } from '@/api/eventManage'
  import { quillEditor } from 'vue-quill-editor'
  export default {
    props: {
      operateType: {
        type: String,
        default: () => 'add'
      },
      eventInfo: {
        type: Object,
        default: () => {
          return {
            eventid: '',
            eventtitle: '',
            eventtype: '',
            eventdate: '',
            address: '',
            reprintflag: '',
            eventtext: '',
            starttime: '',
            endtime:'',
          }
        }
      }
    },
    watch: {
      eventInfo: {
        handler(newVal, objVal) {
          if(newVal !== objVal){
            this.eventForm = newVal
          }
        },
      }
    },
    data() {
      return {
        editorOption: {},
        loading: false,
        eventForm: this.eventInfo,
        eventFileList: [],
        fileLoading: false
      }
    },
    created() {
    },
    methods: {
      async submitUpload(){
        let formData = new FormData()
        formData.append('file', this.eventFileList[0].raw)
        this.fileLoading = true
        const res = await uploadFile(formData)
        this.fileLoading = false
        let vm = this
        let quill = this.$refs.myQuillEditor.quill
        console.log(quill)
        console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        quill.insertEmbed(length, 'image', res.message)
        // 调整光标到最后
        quill.setSelection(length + 1)
        this.quillUpdateImg = false
      },
      handleFileChange(file, FileList){
        this.eventFileList = FileList
      },
      async addSubmit(){
        if(this.operateType === 'add'){
          try {
            this.loading = true
            const res = await addEvent(this.eventForm)
            console.log(res)
            this.$router.go(0)
          } catch (e) {
            console.log( new Error(e))
          }
          this.loading = false
        } else {
          try {
            this.eventForm.eventid = this.eventInfo.eventid
            this.loading = true
            const res = await updateEvent(this.eventForm)
            this.$router.go(0)
            console.log(res)
          } catch (e) {
            console.log( new Error(e))
          }
          this.loading = false
        }
      }
    },
    computed: {},
    components: { quillEditor }
  }
</script>

<style lang="scss" scoped>
  .addEvents{
    .msTop{
      margin-top: 20px;
      .myQuillEditor{
        height: 300px;
      }
    }
  }

</style>
